<!DOCTYPE html>
<html>
<head>
  <title>栈</title>
  <style type="text/css">
    canvas { background:#FAFAFA;}
  </style>
</head>
<body onload="setup();">
  <canvas id="MyCanvas" width="500" height="500"></canvas>

<script type="text/javascript">
  // Es5
  function Stack() {
    let items = [];
    /**
     * push(elements(s)) 添加一个（或者几个）新元素到栈顶
     * pop(): 移除栈顶的元素，同时返回被移除的元素
     * peek: 返回栈顶的元素，不对栈做任何修改
     * isEmpty: 如果栈内没有任何元素就返回true，否者返回false
     * clear(): 移除栈内所有的元素
     * size(): 返回栈内的元素个数
     */
    this.push = function(element) {
      items.push(element);
    }

    this.pop = function() {
      return items.pop();
    }

    this.peek = function() {
      return items[items.length-1];
    }

    this.isEmpty = function() {
      return items.length === 0;
    }

    this.size = function() {
      return items.length;
    }

    this.clear = function() {
      items = [];
    }

    this.print = function() {
      console.log(items.toString())
    }
  }

  var ctr = new Stack();
  console.log(ctr.isEmpty())
  ctr.push(1)
  ctr.push(2)
  ctr.push(3)
  ctr.push(5)
  console.log(ctr.size(), ctr)
  console.log(ctr.pop())
  console.log(ctr.pop())
  console.log(ctr.pop())
  ctr.print()

  let Stack2 = (()=> {
    let items = new WeakMap();

    class Stack {
      constructor() {
        items.set(this, []);
      }

      push(element) {
        let s = items.get(this);
        s.push(element);
      }

      pop(){
        let s = items.get(this);
        let r = s.pop();
        return r;
      }

      peek(){
        let s = items.get(this);
        return s[s.length-1];
      }

      isEmpty(){
        let s = items.get(this);
        return s.length === 0;
      }

      size(){
        let s = items.get(this);
        return s.length;
      }

      clear(){
        items.set(this, []);
      }

      print() {
        let s = items.get(this);
        console.log(s.toString())
      }
    }

    return Stack;
  })();

  var ctr1 = new Stack2();
  console.log(ctr1.isEmpty())
  ctr1.push(5)
  ctr1.push(6)
  ctr1.push(7)
  ctr1.push(8)
  console.log(ctr1.size(), ctr1)
  console.log(ctr1.pop())
  console.log(ctr1.pop())
  console.log(ctr1.pop())
  ctr1.print()
</script>
</body>
</html>

<script>
/**
 * 检测矩形碰撞的代码
 * @author 韩广金
 * @DateTime 2018-12-28
 * @version  [version]
 * @return   {[type]}   [description]
 */
function setup(){
  var canvas = document.getElementById('MyCanvas');
  if (canvas.getContext){
    ctx = canvas.getContext('2d');

    var red = {
      x : 100,
      y : 100,
      width : 80,
      height : 100
    };

    var blue = {
      x : 160,
      y : 180,
      width : 100,
      height : 130
    };

    // 碰撞检测（两行代码搞定）
    if(
      Math.abs(red.x - blue.x) < red.width/2 + blue.width/2 //横向判断
      &&
      Math.abs(red.y - blue.y) < red.height/2 + blue.height/2 //纵向判断
    ){
      console.log("发生碰撞"); 
    }

    //rect的基准点是矩形的左上角
    ctx.rect(red.x - red.width/2,red.y - red.height/2,red.width,red.height);
    ctx.rect(blue.x - blue.width/2,blue.y - blue.height/2,blue.width,blue.height);
    ctx.fill();
  }
}
</script>